<template>
  <div id="mountNode"></div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import G6 from "@antv/g6";
import axios from "axios";

@Component({
  components: {},
})
export default class HomeView extends Vue {
  topoData: any = [];
  mounted() {
    this.handleInitEdge();
    axios.get("/topo.json", {}).then((response) => {
      console.log("获取到的json数据", response);
      this.topoData = response.data;
      this.handleInitTopo();
    });
  }

  handleInitEdge() {
    G6.registerNode("card-node", {
      draw: function drawShape(cfg, group) {
        const r = 2;
        const color = "#5B8FF9";
        const w = cfg.size[0];
        const h = cfg.size[1];
        const shape = group.addShape("rect", {
          attrs: {
            x: -w / 2,
            y: -h / 2,
            width: w, // 200,
            height: h, // 60
            stroke: color,
            radius: r,
            fill: "#fff",
          },
          name: "main-box",
          draggable: true,
        });

        group.addShape("rect", {
          attrs: {
            x: -w / 2,
            y: -h / 2,
            width: w, // 200,
            height: h / 2, // 60
            fill: color,
            radius: [r, r, 0, 0],
          },
          name: "title-box",
          draggable: true,
        });

        // title text
        group.addShape("text", {
          attrs: {
            textBaseline: "top",
            x: -w / 2 + 8,
            y: -h / 2 + 2,
            lineHeight: 20,
            text: cfg.id,
            fill: "#fff",
          },
          name: "title",
        });
        cfg.children &&
          group.addShape("marker", {
            attrs: {
              x: w / 2,
              y: 0,
              r: 6,
              cursor: "pointer",
              symbol: G6.Marker.collapse,
              stroke: "#666",
              lineWidth: 1,
              fill: "#fff",
            },
            name: "collapse-icon",
          });
        group.addShape("text", {
          attrs: {
            textBaseline: "top",
            x: -w / 2 + 8,
            y: -h / 2 + 24,
            lineHeight: 20,
            text: cfg.des || `${cfg.id} -- ${cfg.type}`,
            fill: "rgba(0,0,0, 1)",
          },
          name: `description`,
        });
        return shape;
      },
      setState(name, value, item) {
        if (name === "collapsed") {
          const marker = item
            .get("group")
            .find((ele) => ele.get("name") === "collapse-icon");
          const icon = value ? G6.Marker.expand : G6.Marker.collapse;
          marker.attr("symbol", icon);
        }
      },
    });
  }

  handleInitTopo() {
    console.log("init");
    const container = document.getElementById("mountNode");
    const width = container?.scrollWidth;
    const height = container?.scrollHeight || 500;
    const graph = new G6.TreeGraph({
      container: "mountNode", // 创建的容器 id 或容器本身
      width, // Number，图的宽度
      height, // Number，图的高度
    });
    graph.data(this.topoData); // 读取数据源到图上
    graph.render(); // 渲染图
    graph.fitView();
    graph.on("node:click", (e: any) => {
      console.log(e, "node节点数据=");
      if (e.target.get("name") === "collapse-icon") {
        e.item.getModel().collapsed = !e.item.getModel().collapsed;
        graph.setItemState(e.item, "collapsed", e.item.getModel().collapsed);
        graph.layout();
      }
    });

    if (typeof window !== "undefined") {
      window.onresize = () => {
        if (!graph || graph.get("destroyed")) return;
        if (!container || !container.scrollWidth || !container.scrollHeight)
          return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      };
    }
  }
}
</script>

<style scoped>
#home {
  width: 100%;
  height: 100%;
}
</style>
